<template>
    <div class="fullPage">
        <div class="pageHeader">
            <div class="title">
                <i :class="ui.title.icon"></i> <span>{{ui.title.name}}</span> / <span>{{ui.title.localName}}</span>
            </div>
            <div class="filter">
                <div class="lstItems"> 
                    <div class="item">
                        <el-select  size="small" clearable  v-model="filter.delegation.delegationId" placeholder="请选择代表团" @change="onChangeDelegation">
                            <el-option
                                v-for="(delegation, delegationIndex) in filter.delegation.items"
                                :key="delegationIndex"
                                :label="delegation.localName"
                                :value="delegation.delegationId"
                            >      
                                <span style="float: left">{{ delegation.localName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ delegation.name }}</span>
                            </el-option>
                        </el-select>
                    </div>
                    <div class="item">
                          <el-input
                            placeholder="请输入内容"
                            clearable
                            size="small"
                            v-model="filter.searchText">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="acs">
                <ul class="lstAcs">
                    <li><el-button type = "text" @click="refresh"><i class="fa fa-refresh"></i> refresh</el-button></li>
                    <li><el-button type = "text" @click="showDlg(null)"><i class="fa fa-plus"></i> create new</el-button></li>
                </ul>
            </div>
        </div>
        <div class="pageBody">
            <el-table
                :data="rowDatas"
                style="width: 100%"
                :height="ui.tabHeight"
                v-loading="ui.loading"
            >
<el-table-column
	prop="delegationCode"
	label="delegationCode"
></el-table-column>
<el-table-column
	prop="delegationName"
	label="delegationName"
></el-table-column>
<el-table-column
	prop="delegationLocalName"
	label="delegation"
></el-table-column>
<el-table-column
	prop="code"
	label="code"
></el-table-column>
<el-table-column
	prop="bIBCODE"
	label="bIBCODE"
></el-table-column>
<el-table-column
	prop="gender"
	label="gender"
></el-table-column>
<el-table-column
	prop="name"
	label="name"
></el-table-column>
<el-table-column
	prop="localName"
	label="localName"
></el-table-column>
<el-table-column
	prop="shortName"
	label="shortName"
></el-table-column>
<el-table-column
	prop="localShortName"
	label="localShortName"
></el-table-column>
                <el-table-column
                    fixed="right"
                    label="Action"
                    width="80">
                    <template slot-scope="scope">
                        <el-button
                        @click.native.prevent="showDlg(scope.row)"
                        type="text" >
                            <i class="fa fa-edit"></i> edit
                        </el-button> 
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :title="ui.title.name + ' / '+ ui.title.localName"
            :visible.sync="dlg.show"
            width="800px"
            >
            
                <div class="formEditPan">

                    <el-row :gutter="10">
                        <el-col 
                            :span="12"
                            v-for="(col , colInd) in ui.tabCols"
                            :key="colInd"
                        >
                            <div 
                                class="editRow"
                            >
                                <div class="lab" style="width:130px">{{col}}</div>
                                <div class="edit">
                                    <el-input v-model="dlg.info[col]"></el-input>
                                </div>
                            </div>  
                        </el-col>
                    </el-row>
 
                </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dlg.show = false" type = "warning" style="float:left"><i class="fa fa-reply"></i> Cancel</el-button>
                <el-button type="primary" @click="save"><i class="fa fa-save"></i> OK</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            }
            catch(er){
                console.log(er)
            }
        },
        data() {
            return {
                sqls:{
                    path:"squ/reg/athlete/",
                    delegation:"",
                    countryOrRegion:"",
                    getItems:"" ,
                    new:"",
                    update:""
                },
                ui:{
                    title: {
                        icon:"fa fa-users" ,
                        name:"Athlete" ,
                        localName:"运动员"
                    },
                    tabHeight:200,
                    loading:false
                },
                filter:{
                    delegation:{
                        enable:false,
                        items:[],
                        delegationId:null
                    },
                    searchText:"",
                    modifyFlag: false
                },
                dlg:{
                    show:false,
                    info:{}
                },
                rowDatas:[],
                dicts:{
                    delegations:[],
                    countryOrRegions:[]
                }
            };
        },
        methods: {
            init() {
                return new Promise((success , faild)=>{
                    var me = this;
                    try{
                        var h = (document.getElementsByClassName('pageBody')[0]).offsetHeight;
                        me.ui.tabHeight = h; 
                        me.sqls.delegation = me.sqls.path+"delegations";
                        me.sqls.countryOrRegion = me.sqls.path+"countryOrRegion";
                        me.sqls.getItems = me.sqls.path+"getItems";
                        me.sqls.new = me.sqls.path+"new";
                        me.sqls.update = me.sqls.path+"update";
                        me.sys.query(me.sqls.delegation  , {}).then(res=>{
                            me.filter.delegation.items = res;
                            me.dicts.delegations.items = res;
                            me.sys.query(me.sqls.countryOrRegion , {}).then(res=>{
                                me.dicts.countryOrRegions = res;
                                success();
                            })
                        })
                    }
                    catch(er){
                        console.log(er);
                        success();
                    }
                })

            },
            refresh() {
                var me = this;
                try{
                    var ps={
                        delegationId: me.filter.delegation.enable?me.filter.delegation.items[me.filter.delegation.index].delegationId:0 ,
                        searchText: me.filter.searchText ,
                        modify: me.filter.modifyFlag
                    }
                    var key = me.sqls.getItems;
                    me.ui.loading = true;
                    me.sys.query(key , ps).then(res=>{
                        me.ui.loading = false;
                        me.rowDatas = res;
                    })
                }
                catch(er){
                    console.log(er)
                }
            },
            showDlg(rowData) {
                var me = this;
                try{
                    me.dlg.info = rowData && rowData!=null && rowData.delegationId>0 ? rowData :{
                        athleteId:0 ,
                        bIBCODE:"" , 
                        birthCountry:"" , 
                        birthDay:"" , 
                        birthPlace:"" , 
                        blood:"" , 
                        code:"" , 
                        delegationEXID:"" , 
                        delegationID:"" , 
                        familyName:"" , 
                        gender:"W" , 
                        givenName:"" , 
                        iFCode:"" , 
                        localFamilyName:"" , 
                        localGivenName:"" , 
                        localName:"" , 
                        localPrintName:"" , 
                        localShortName:"" , 
                        localTVName:"" , 
                        modificationIndicator:"" , 
                        name:"" , 
                        nation:"" , 
                        nationalityID:"" , 
                        passportFamilyName:"" , 
                        passportGivenName:"" , 
                        printinitialName:"" , 
                        printName:"" , 
                        residenceCountry:"" , 
                        residencePlace:"" , 
                        shortName:"" , 
                        tVinitialName:"" , 
                        tVName:"" , 
                    };
                    me.dlg.show = true;
                }
                catch(er){
                    console.log(er)
                }
            },
            save( ) {
                var me = this;
                try{

                }
                catch(er){
                    console.log(er)
                }
            },
            delete( ) {
                var me = this;
                try{

                }
                catch(er){
                    console.log(er)
                }
            },
            onChangeSwitchDelegation( ev ) {
                var me = this;
                try{

                }
                catch(er){
                    console.log(er)
                }
            },
            onChangeDelegation( ev ) {
                var me = this;
                try{

                }
                catch(er){
                    console.log(er)
                }
            },
        },
        
    }
</script>


<style lang="less" scoped>
    @import url('../module.less');

</style>